<template>
  <picker mode="multiSelector"
          :value="multiIndexList"
          :range="multiArray"
          @change="handleValueChange"
          @columnchange="handleColumnChange">
    <slot></slot>
  </picker>
</template>

<script>
const china_regions = require('./regions.json')
// const provinceArr = china_regions.map(item=>item.name)
export default {
  props: {
    multiIndexList: {
      type: Array,
      default () {
        return [0, 0, 0]
      }
    },

    areaList: {
      type: Array,
    }
  },
  data () {
    return {
    }
  },

  computed: {
    multiArray () {
      return this.areaList.map(arr => arr.map(item => item.name))
    }
  },
  methods: {

    /* 滚动以后，获取到哪列第几条的数据
     此时需要判断是哪一级，去获取下一级数据，通知父组件获取数据，默认再加载默认后面级的数据
     */
    handleColumnChange (e) {
      let col = e.detail.column;
      let row = e.detail.value;
      /* 此时通知父组件去加载对应级别的数据 */
      /* col 第几级，row第几条*/
      if (col < 2) {
        /* 0,1级的修改才去加载，2级不去加载（如果有3级，那就加载2级，修改col的判断条件即可） */
        this.$emit('getArea', col, row)
      }
    },

    /* 点击确定事件 */
    handleValueChange (e) {
      this.$emit('getRegions', e.detail.value)
    }
  }
}
</script>
